<template>
	<view>
		<view class="tishi-box">
			<u-icon name="info-circle" color="#FF7A21"></u-icon>
			<span style="margin-left: 10rpx;font-size: 30rpx;">注意: 请确认本单位疗休养账户已完成申请</span>
		</view>
		{{JSON.stringify(formData)}}
		<base-form :formColumn="formColumn" v-model="formData" :rules="rules" ref="form">
			<template #aaa>
				我是slot
			</template>
			
			<template #telBtton>
				<view class="tel-btn" @click="getCode">
					获取验证码
				</view>
			</template>
		</base-form>
		
		<view class="btn-box">
			<u-button text="提交" shape="circle" type="primary" color="linear-gradient(to right, #93DCB4, #5CB87F)"
			 @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formColumn:[
					{
						key:'aaa',
						type:'slot',
					},
					{
						label:'单位邀请码',
						key:'unitcode',
						type:'text',
						required:true,
						placeholder:'请输入单位邀请码'
					},
					{
						label:'单位名称',
						key:'unitName',
						type:'text',
						required:true,
						placeholder:'请输入单位名称',
					},
					{
						label:'部门',
						key:'department',
						type:'text',
						required:true,
						placeholder:'请输入部门',
					},
					{
						label:'姓名',
						key:'name',
						type:'text',
						required:true,
						placeholder:'请输入姓名',
					},
					{
						label:'性别',
						key:'sex',
						type:'select',
						required:true,
						placeholder:'请选择性别',
						list: [
							[{
								label: '男',
								// 其他属性值
								id: '1'
							}, {
								label: '女',
								id: '2'
							}]
						],
						keyName:'label'
					},
					{
						label:'身份证号',
						key:'identity',
						type:'text',
						required:true,
						placeholder:'请输入身份证号',
					},
					{
						label:'手机号',
						key:'tel',
						type:'text',
						required:true,
						slot:'telBtton',
						placeholder:'请输入手机号',
					},
					{
						label:'验证码',
						key:'code',
						type:'text',
						required:true,
						placeholder:'请输入验证码',
					},
					{
						label:'疗休养类型',
						key:'recuperation',
						type:'select',
						required:true,
						placeholder:'请选择疗休养类型',
						list: [
							[{
								label: 'SPA',
								// 其他属性值
								id: '1'
							}, {
								label: '足浴',
								id: '2'
							}]
						],
						keyName:'label'
					},
					
					
				],
				formData:{
					unitcode:'',
					unitName:'',
					department:'',
					name:'',
					sex:'',
					identity:'',
					tel:'',
					code:'',
					recuperation:'',
				},
				rules:{
					'unitcode': {
						type: 'string',
						required: true,
						message: '请输入单位邀请码',
						trigger: ['blur', 'change']
					},
					'unitName': {
						type: 'string',
						required: true,
						message: '请输入单位名称',
						trigger: ['blur', 'change']
					},
					'department': {
						type: 'string',
						required: true,
						message: '请输入部门',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'sex': {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					'identity': {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'tel': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					'recuperation': {
						type: 'string',
						required: true,
						message: '请选疗休养类型',
						trigger: ['blur', 'change']
					},
					
				}
			}
		},
		async onLoad() {
		

		},
		methods: {
			async submit(){
				const res = await this.$refs['form'].validate()
				console.log(res)
			},
			getCode(){
				console.log('获取验证码')
			}
		}
	}
</script>

<style lang="less">
	.tishi-box{
		display: flex;
		padding: 40rpx 30rpx;
		background-color: #FFF2E2;
	}
	page{
		background-color: #F4F4F4;
	}
	.tel-btn{
		color: #61BA83;
	}
	.btn-box{
		margin-top: 80rpx;
		padding: 40rpx;
	}
</style>
